<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { SubjectDto } from './models/models';
import { useApiStore } from '@/app/com/api';
import SideBar from '@/components/common/SideBar.vue';
import { categoryTexts, difficultyTexts, ntMap } from '@/numTextMappings';
import { useUserInfoStore } from '@/app/globalStores/userInfo';

const api = useApiStore().get()
const userInfo = useUserInfoStore()

const list = ref<SubjectDto[]>()
async function load(){
    list.value = await api.subject.index()
}

const sidebar = ref<InstanceType<typeof SideBar>>()
const isCreating = ref(false)
const editingItem = ref<SubjectDto>()
function startCreating(){
    isCreating.value = true
    editingItem.value = {
        Id: 0,
        CategoryId: 0,
        Difficulty: 0
    }
    sidebar.value?.extend()
}
function startEditing(s:SubjectDto){
    isCreating.value = false
    editingItem.value = s
    sidebar.value?.extend()
}
async function done(){
    if(!editingItem.value){
        return
    }
    let success = false
    if(isCreating.value){
        success = await api.subject.create(editingItem.value)
    }else{
        success = await api.subject.update(editingItem.value)
    }
    if(success){
        await load()
        sidebar.value?.fold()
    }
}

onMounted(async()=>{
    await load()
})
</script>

<template>
<h1 class="h1WithBtns">
    科目列表
    <div>
        <button @click="startCreating" v-if="userInfo.isAdmin">新增</button>
    </div>
</h1>
<div class="wideTableContainer">
<table class="fullWidth">
    <thead>
        <tr>
            <th>名称</th>
            <th style="width: 100px;">类别</th>
            <th style="width: 80px;">难度</th>
            <th style="width: 80px;">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="subject in list" :key="subject.Id">
            <td>{{ subject.Name }}</td>
            <td>{{ ntMap(categoryTexts, subject.CategoryId) }}</td>
            <td>{{ ntMap(difficultyTexts, subject.Difficulty) }}</td>
            <td>
                <button @click="startEditing(subject)" class="lite" v-if="userInfo.isAdmin">编辑</button>
            </td>
        </tr>
    </tbody>
</table>
</div>
<SideBar ref="sidebar">
    <h1>{{ isCreating ? '新增科目':'编辑科目' }}</h1>
    <table v-if="editingItem"><tbody>
        <tr>
            <td>名称</td>
            <td>
                <input v-model="editingItem.Name" />
            </td>
        </tr>
        <tr>
            <td>简介</td>
            <td>
                <textarea v-model="editingItem.Intro" :rows="3"></textarea>
            </td>
        </tr>
        <tr>
            <td>类别</td>
            <td>
                <select v-model="editingItem.CategoryId">
                    <option v-for="i in Object.entries(categoryTexts)" :value="i[0]">{{ i[1] }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>难度</td>
            <td>
                <select v-model="editingItem.Difficulty">
                    <option v-for="i in Object.entries(difficultyTexts)" :value="i[0]">{{ i[1] }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button @click="done">OK</button>
            </td>
        </tr>
    </tbody></table>
</SideBar>
</template>

<style scoped lang="scss">
</style>